<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="order" class="demo-form-inline">
          <el-form-item label="订单号">
            <el-input v-model="order.orderNo" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item label="收货人">
            <el-input v-model="order.consignee" placeholder="收货人"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="order.phone" placeholder="手机号"></el-input>
          </el-form-item>

          <el-form-item label="订单状态">
            <el-select v-model="order.orderState" placeholder="请选择订单状态">
              <el-option label="已完成" value="已完成"></el-option>
              <el-option label="已受理" value="已受理"></el-option>
              <el-option label="派送中" value="派送中"></el-option>
            </el-select>
          </el-form-item>

          <!-- 选择时间 -->
          <el-form-item label="选择时间">
            <el-date-picker
              v-model="order.date"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              value-format="yyyy/MM/dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSearchOrder">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 订单内容 -->
      <div class="orderMain">
        <el-table
          :data="tableData"
          :style="{ width: w + 'px' }"
          max-height="400"
        >
          <el-table-column fixed prop="id" label="下单id" width="80">
          </el-table-column>
          <el-table-column fixed prop="orderNo" label="订单号" width="80">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.orderTime | getTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="120">
          </el-table-column>
          <el-table-column prop="consignee" label="收货人" width="120">
          </el-table-column>
          <el-table-column prop="deliverAddress" label="配送地址" width="180">
          </el-table-column>
          <el-table-column prop="deliveryTime" label="送达时间" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.deliveryTime | getTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="用户备注" width="120">
          </el-table-column>
          <el-table-column prop="orderAmount" label="订单金额" width="120">
          </el-table-column>
          <el-table-column prop="orderState" label="订单状态" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope" fixed>
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
              >
                查看
              </el-button>
              

              <el-button
                @click="handleEdit(scope.$index, scope.row)"
                type="text"
                size="small"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 查看 抽屉 -->

        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" >
          <h2>查看订单</h2>
          <el-form label-width="70px" :model="editOrderForm" label-position="left">
            <el-form-item label="订单号：">
              <p>{{ editOrderForm.orderNo }}</p>
            </el-form-item>
            <el-form-item label="下单时间：">
              <p>{{ editOrderForm.orderTime }}</p>
            </el-form-item>
            <el-form-item label="联系电话：">
              <p>{{ editOrderForm.phone }}</p>
            </el-form-item>
            <el-form-item label="收货人：">
              <p>{{ editOrderForm.consignee }}</p>
            </el-form-item>
            <el-form-item label="送货地址：">
              <p>{{ editOrderForm.deliverAddress }}</p>
            </el-form-item>
            <el-form-item label="送达时间：">
              <p>{{ editOrderForm.deliveryTime }}</p>
            </el-form-item>
            <el-form-item label="备注：">
              <p>{{ editOrderForm.remarks }}</p>
            </el-form-item>
            <el-form-item label="订单金额：">
              <p>{{ editOrderForm.orderAmount }}</p>
            </el-form-item>
            <el-form-item label="订单状态：">
              <p>{{ editOrderForm.orderState }}</p>
            </el-form-item>
          </el-form>
        </el-drawer>

        <!-- 编辑抽屉 -->
        <el-drawer
          title="我是标题"
          :visible.sync="drawer2"
          :with-header="false"
        >
          <h2>编辑订单</h2>
          <el-form label-width="70px" :model="editOrderForm2" label-position="left">
            <el-form-item label="订单id号">
              <el-input v-model="editOrderForm2.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="订单号">
              <el-input v-model="editOrderForm2.orderNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="下单时间">
              <el-date-picker
                v-model="editOrderForm2.orderTime"
                type="datetime"
                disabled
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions2"
                value-format="yyyy-MM-dd HH:mm:ss"
              >

              </el-date-picker>
              <!-- <el-input v-model="editOrderForm2.orderTime" value-format="yyyy-MM-dd HH:mm:ss" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="editOrderForm2.phone"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
              <el-input v-model="editOrderForm2.consignee"></el-input>
            </el-form-item>
            <el-form-item label="送货地址">
              <el-input v-model="editOrderForm2.deliverAddress"></el-input>
            </el-form-item>

            <el-form-item label="送达时间">
              <el-date-picker
                v-model="editOrderForm2.deliveryTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions2"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="editOrderForm2.remarks"></el-input>
            </el-form-item>
            <el-form-item label="订单金额">
              <el-input v-model="editOrderForm2.orderAmount"></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-input v-model="editOrderForm2.orderState"></el-input>
            </el-form-item>

            <el-button type="primary" @click="onSubmit">修改</el-button>
            <el-button @click="onSubmit2">取消</el-button>
          </el-form>
        </el-drawer>
      </div>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 30, 80, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { orderList, orderEdit } from "../../api/order";
import dayjs from "dayjs";
export default {
  data() {
    return {
      row: "",
      w: document.body.clientWidth - 300,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      serachData: {},

      //表单数据    我们保存得到搜索的参数
      order: {
        orderNoL: "", //订单号
        consignee: "", //收货人
        phone: "", //手机号
        orderState: "", //订单状态
        date: [], //是一个数组里面是一个对象
      },

      //表格具体数据列表
      tableData: [
        {
          orderNo: "", //订单号
          orderTime: "", //下单时间
          phone: "", //手机号
          consignee: "", //收货人
          deliverAddress: "", //配送地址
          deliveryTime: "", //送达时间
          remarks: "", //用户备注
          orderAmount: "", //订单金额
          orderState: "", //订单状态
        },
      ],
      drawer: false, //抽屉的显示和隐藏
      //查看表单
      editOrderForm: {
        orderNo: "",
        orderTime: "",
        phone: "",
        consignee: "",
        deliverAddress: "",
        deliveryTime: "",
        remarks: "",
        orderAmount: "",
        orderState: "",
      },

      //编辑表单
      drawer2: false,
      editOrderForm2: {
        id: "",
        orderNo: "",
        orderTime: "",
        phone: "",
        consignee: "",
        deliverAddress: "",
        deliveryTime: "",
        remarks: "",
        orderAmount: "",
        orderState: "",
      },

      //日期时间选择器
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pickerOptions2: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
    };
  },
  methods: {

    //编辑数据
   async onSubmit() { 
    let res = await orderEdit(this.editOrderForm2);
      console.log(res);
    this.editOrderForm2={...res}
      let {msg,code}=res

      if (code===0) {
        this.$message({
          type: "success",
          message: msg,
        });
        this.xuanOrderLists();
      }else{
        this.$message.error(msg);

      }
      this.drawer2=false

    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.xuanOrderLists();
    },

    //查看数据
    handleClick(row) {
      console.log(row);
      this.row = row.id; //得到点击的id
      console.log(this.row);
      this.editOrderForm = row;
      this.editOrderForm.orderTime= dayjs(row.orderTime).format("YYYY/MM/DD HH:mm:ss")
      this.editOrderForm.deliveryTime=dayjs(row.deliveryTime).format("YYYY/MM/DD HH:mm:ss")
      this.drawer = true;
    },

    //编辑数据
    handleEdit(index, row) {
    //  console.log(row);
      this.drawer2 = true;
       //处理时间
      
    this.editOrderForm2 = row;
    this.editOrderForm2.orderTime= dayjs(row.orderTime).format("YYYY/MM/DD HH:mm:ss")
    this.editOrderForm2.deliveryTime=  dayjs(row.deliveryTime).format("YYYY/MM/DD HH:mm:ss")
    console.log(this.editOrderForm2);
    this.editOrderForm2={...row}
    
    },
    onSubmit2(){
      this.drawer2=false

    },

    //列表内容数据
    deleteRow(index, rows) {
      rows.splice(index, 1);
      // console.log(rows);
      this.xuanOrderLists();
    },

    //列表数据渲染
    async xuanOrderLists() {
      let res = await orderList({
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          ...this.serachData, //我们将搜索参数放到这里
        },
      });
      // console.log(res);
      this.tableData = res.data;
      this.total = res.total;
    },

    //处理查询数据
    onSearchOrder() {
      console.log(this.order); //此时我们表单填写了什么就有了什么内容值

      //data内容值有问题，我们需要修改样式处理一下 Wed Mar 09 2022 14:53:48 GMT+0800 (中国标准时间) {}
      //"2022/03/09 14:55:09"  此时格式修改正确    value-format="yyyy/MM/dd HH:mm:ss"
      //此时我们又发现了问题   我们需要的是数组里面包字符串，但是只是两个
      this.serachData = { ...this.order };
      this.serachData.date = JSON.stringify(this.serachData.date);
      //将当前页赋值为第一页
      this.currentPage = 1;
      this.xuanOrderLists();
    },
    //处理窗口滚动
    randerResize() {
      this.w = document.body.clientWidth - 300;
    },
  },

  created() {
    window.addEventListener("resize", this.randerResize); //处理窗口自适应
    this.xuanOrderLists();
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.randerResize); //消除窗口自适应
  },

  //处理日期
  filters: {
    getTime(val) {
      return dayjs(val).format("YYYY/MM/DD HH:mm:ss");
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-form {
  padding: 20px;
}

.el-drawer__body{
  h2{
    margin: 20px;
    color:#909399 ;
 
  }
}
.el-input {
  width: 230px;
  margin-left: 20px;
}

.el-form{
  padding: 10px 30px;
}

/deep/.el-form-item__label{
  width: 120px !important;
}
</style>